﻿
<style type="text/css">
/*Setting*/
input,
textarea {
  width: auto;
}
select {
width: 70px;
}
/*End Setting*/    
    
#program_content_wrapper
{
    
    width: 1150px;

    height: 700px;
    border: 1px solid #dddddd;
    border-collapse: separate;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    
}
#program_content_wrapper ul.listProgram 
{
   
    padding: 20px 5px 5px 5px;
    font-family: inherit;
    font-weight: bold;
    color: inherit;
    text-rendering: optimizelegibility;
    list-style: none;
    
}
#program_content_wrapper ul.listProgram li
{
    padding: 5px;
    
    
}
#program_content_sidebar
{
    /*width: 200px;*/
    width: 150px;
    height: 700px;
    border-right: 1px solid #dddddd;
    background-color: #f5f5f5;
    float: left;
    
}

#program_content_mainContent_viewContent
{
    width: 945px;
    height: 200px;
    border-bottom: 1px solid #dddddd;
    float: right;
    /*background-color: Red;*/
}
#program_content_mainContent_viewContent_screen
{
    
    margin: 20px auto;
    width: 800px;
    height: 150px;
    background-color: #333333;
}

#program_content_mainContent_tabContent
{
    width: 945px;
    height: 500px;
    float:right;
    /*background-color: Yellow;*/
}
/* Tab Content Css */

ul.tabs
{
    padding-top: 7px;
    font-size: 0;
    margin:0;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the tabs as desired*/
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px; /*distance between tabs*/
}
        
ul.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
    border-radius: 2px 2px 0 0;
    outline:none;
}
        
ul.tabs li a:visited
{
    color: #000;
}
        
ul.tabs li a:hover
{
    border: 1px solid #B7B7B7;
    background:#F0F0F0 url(tabbg.gif) 0 -36px repeat-x;
}
        
ul.tabs li.selected a
{
    /*selected tab style */
    position: relative;
    top: 0px;
    font-weight:bold;
    background: white;
    border: 1px solid #B7B7B7;
    border-bottom-color: white;
}
        
        
ul.tabs li.selected a:hover
{
    /*selected tab style */
    text-decoration: none;
}
        
div.tabcontent
{
    display: block;
}

div.tabcontents
{
    width: auto;
    height: 470px;
    border: 1px solid #B7B7B7; 
    
    background-color:#FFF;
    border-radius: 0 2px 2px 2px;
}
div#view1_program_content
{
    padding: 30px;
}
div#view2_content_imgs
{
    width: 330px;
    height: auto;
    padding: 10px;
    float:left;
    border-right: 1px solid #B7B7B7; 
}
div#view2_content_txts
{
    width: 565px;
    height: auto;
    padding: 10px;
    float:right;
}

/* End Tab Content Css*/

/* Css Program content*/
#program_content_ul_button
{
    margin: 90px 0px 20px 0px;
    list-style: none;
}
#program_content_ul_button li
{
    display: inline;
    padding-left: 10px;
}
.input-xlarge
{
    
}
.program_content_table
{
    width: auto;
}
.program_content_table td
{
    width: 200px;
    height: 50px;
}
.view2_content_tables_img td
{
    
    width: 200px;
}
.view2_content_tables_text td
{
    width: 200px;
}

/* End css Program content*/
</style>


<div id="program_content_wrapper">
    <div id="program_content_sidebar">
        <ul class="listProgram">
            <li><a> <img src="http://static-hn.24hstatic.com:8008/images/icon_TRUYENHINH.gif" alt="xyz" /> Program name</a></li>
            <li><a>Program name</a></li>
            <li><a>Program name</a></li>
            <li><a>Program name</a></li>
            <li><a>Program name</a></li>
            <li><a>Program name</a></li>
            <li><a>Program name</a></li>
        </ul>
    </div><!-- End div#program_content_sidebar (program list) -->
    <div id="program_content_mainContent">
        <div id="program_content_mainContent_viewContent">
            <div id="program_content_mainContent_viewContent_screen">

            </div><!-- End div#program_content_mainContent_viewContent_screen -->
        </div>

        <div id="program_content_mainContent_tabContent">
                <ul class="tabs" persist="true">
                    
                    <li><a href="#" rel="view2">Content Image</a></li>
                </ul>
                <div class="tabcontents">
                    <div id="view2_content_imgs">
                            <table class="view2_content_tables_img" border=1px>
                                <tr>
                                    <td >
                                        <label class="control-label" for="input01">Image name</label>
                                    </td>
                                    <td >
                                        <input type="text" size="20"  id="input01" value="Program 1">
                                        <!--<a class="content_table_edit" href="#">Edit</a> -->
                                    </td>
                                    
                                </tr>
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">X</label>
                                    </td>
                                    <td>
                                            <input type="number" min = "0" max = "18" step = "1" value="1"  />
                                            <!-- <a class="content_table_edit" href="#">Edit</a> -->
                                    </td>                                    
                                </tr>
                               
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">Y:  </label>
                                    </td>
                                    <td>
                                            <input type="number" min = "0" max = "18" step = "1" value="1"  />
                                            <!-- <a class="content_table_edit" href="#">Edit</a> -->
                                    </td>
                                </tr>
                             
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">Width:  </label>
                                    </td>
                                    <td>
                                        <input type="number" min = "0" max = "18" step = "1" value="1"  />
                                        <!-- <a class="content_table_edit" href="#">Edit</a> -->
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">height:  </label>
                                    </td>
                                    <td>
                                        <input type="number" min = "0" max = "18" step = "1" value="1" />
                                        <!-- <a class="content_table_edit" href="#">Edit</a> -->
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Method</label>
                                    </td>
                                    <td >
                                        <select>
                                          <option value="static">Static</option>
                                          <option value="random">Random</option>                                          
                                        </select>   
                                        <!-- <a class="content_table_edit" href="#">Edit</a> -->  
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Run Speed</label>
                                    </td>
                                    <td>
                                        <select>
                                          <option value="static">1</option>
                                          <option value="random">2</option>                                          
                                        </select>      
                                        <!-- <a class="content_table_edit" href="#">Edit</a> -->
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Image:  </label>
                                    </td>
                                    <td>
                                        <input type="file" name="datafile" size="40"> 
                                        <!-- <a class="content_table_edit" href="#">Edit</a> --> 
                                    </td>
                                </tr>
                                <!--
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                        <a class="btn btn-warning btn-large" href="#">Edit img</a>
                                        <a class="btn btn-success btn-large" href="#">Save Img</a>
                                        
                                    </td>                                    
                                </tr> -->
                            </table>
                        </div><!-- End div#view2_content_imgs  -->    
                        
                </div>                   
        </div><!-- End div#program_content_mainContent_tabContent -->
    </div>

</div><!-- End div#program_content_wrapper -->